<template>
  <div class="app-container">
    <remote-css href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></remote-css>

    <div v-show="!loading" class="filter-container" style="padding-bottom: 5px">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="24">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
              <el-link :underline="false" @click="viewFloder(breadcrumb.path)">
                <span v-if="!breadcrumb.name"><i class="el-icon-s-home"></i></span>
                <span v-else>{{ breadcrumb.name }}</span>
              </el-link>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
      </el-row>
    </div>
    <!-- 列表 -->
    <el-table ref="tableRef" v-loading="loading" :data="datas" style="width: 100%" border>
      <el-table-column prop="name" label="名称" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.link">
            <el-link :underline="false" @click="viewFloder(scope.row.link)"><i :class="scope.row.icon"></i> {{ scope.row.name }}</el-link>
          </span>
          <span v-else><i :class="scope.row.icon"></i> {{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="filesize" label="大小" min-width="100" align="center"/>
      <el-table-column prop="modif" label="时间" min-width="160" align="center"/>
      <el-table-column prop="perms" label="属性" min-width="80" align="center"/>
      <el-table-column prop="owner" label="所有者" min-width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.owner.name }}:{{ scope.row.group.name }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="160" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button v-if="!row.link" type="primary" icon="el-icon-view" size="mini" @click="handle(row, 'view')">查看</el-button>
          <el-button type="warning" icon="el-icon-edit" size="mini" @click="handle(row, 'rename')">重命名</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handle(row, 'delete')">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!loading" class="total-text">
      文件总大小：<el-tag type="">{{all_files_size}}</el-tag>
      文件数：<el-tag type="success">{{num_files}}</el-tag>
      文件夹数：<el-tag type="info">{{num_folders}}</el-tag>
      分区大小：<el-tag type="warning">{{partition_size}}</el-tag>
      剩余大小：<el-tag type="danger">{{free_of_size}}</el-tag>
    </div>

    <!-- 查看 -->
    <el-dialog :title="dialogViewTitle" :visible.sync="dialogViewVisible" top="15vh" :close-on-click-modal="false">
      <pre v-highlight="fileText"><code></code></pre>
    </el-dialog>
  </div>
</template>

<script>
import Highlight from '@/directive/highlight' // v-highlight 代码高亮指令
import screenHeight from '@/utils/screen-height'
import {list, handle} from '@/api/admin/system-file'

export default {
  name: 'AdminSystemFile',
  components: {
    'remote-css': {
      render(createElement) {
        return createElement('link', {attrs: {rel: 'stylesheet', type: 'text/css', href: this.href}})
      },
      props: {
        href: {type: String, required: true}
      }
    },
    'remote-js': {
      render(createElement) {
        return createElement('script', {attrs: {type: 'text/javascript', src: this.href}})
      },
      props: {
        href: {type: String, required: true}
      }
    }
  },
  directives: {Highlight},
  data() {
    return {
      height: 680,
      loading: false,
      datas: [],
      model: {},

      path: '',
      breadcrumbs: [],
      all_files_size: 0,
      num_files: 0,
      num_folders: 0,
      partition_size: 0,
      free_of_size: 0,

      dialogViewVisible: false,
      dialogViewTitle: '',
      fileText: '<code></code>'
    }
  },
  created() {
    this.height = screenHeight()
    this.list()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      list({
        path: this.path
      }).then(res => {
        this.datas = res.data.data
        this.path = res.data.path
        this.breadcrumbs = res.data.breadcrumbs
        this.all_files_size = res.data.all_files_size
        this.num_files = res.data.num_files
        this.num_folders = res.data.num_folders
        this.partition_size = res.data.partition_size
        this.free_of_size = res.data.free_of_size

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 查看文件夹/返回目录
    viewFloder(path) {
      this.path = path
      this.list()
    },
    // 操作
    handle(row, type) {
      if (type == 'view') {
        // 查看
        const loading = this.$loading({
          lock: true,
          text: 'Loading...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        handle({
          path: this.path,
          action: type,
          name: row.name
        }).then(res => {
          loading.close();
          this.dialogViewVisible = true
          this.dialogViewTitle = row.name
          this.fileText = res.data
        }).catch(() => {
          this.loading = false
        })
      } else if (type == 'rename') {
        // 重命名
        this.$prompt('', '重命名', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: row.name,
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+/,
          inputErrorMessage: '格式不正确'
        }).then(({value}) => {
          if (value != row.name) {
            this.loading = true
            handle({
              path: this.path,
              action: type,
              from_name: row.name,
              name: value
            }).then(res => {
              this.list()
              this.$message.success(res.msg)
            }).catch(() => {
              this.loading = false
            })
          }
        }).catch(() => {
          /*this.$message({
            type: 'info',
            message: '取消输入'
          })*/
        })
      } else if (type == 'delete') {
        // 删除
        this.$confirm(
          '确定要删除文件： <span style="color:red">' + row.name + ' </span> 吗？',
          '文件：' + row.name,
          {type: 'warning', dangerouslyUseHTMLString: true}
        ).then(() => {
          this.loading = true
          handle({
            path: this.path,
            action: type,
            name: row.name
          }).then(res => {
            this.list()
            this.$message.success(res.msg)
          }).catch(() => {
            this.loading = false
          })
        }).catch(() => {
        })
      }
    }
  }
}
</script>

<style>
.el-dialog .el-dialog__body {
  padding-bottom: 0;
}
</style>

<style scoped>
.total-text {
  border-left: 1px solid #dfe6ec;
  border-right: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
  height: 35px;
  line-height: 35px;
  padding-left: 10px;
  font-size: 14px;
  color: #606266;
}

i.fa.fa-folder-o {
  color: #0157b3
}
i.fa.fa-picture-o {
  color: #26b99a
}
i.fa.fa-file-archive-o {
  color: #da7d7d
}
i.fa.fa-css3 {
  color: #f36fa0
}
i.fa.fa-file-code-o {
  color: #007bff
}
i.fa.fa-code {
  color: #cc4b4c
}
i.fa.fa-file-text-o {
  color: #0096e6
}
i.fa.fa-html5 {
  color: #d75e72
}
i.fa.fa-file-excel-o {
  color: #09c55d
}
i.fa.fa-file-powerpoint-o {
  color: #f6712e
}
</style>
